<template>
  <div class="field-date">
    <div
      class="el-date-picker-icon"
      v-if="
        tableField.fieldVariableValue.modifyEntryDate &&
          tableField.fieldVariableValue.modifyEntryDate === 1
      "
    >
      <el-input
        v-model="localValue"
        :size="size"
        @input="input = ''"
        :disabled="disabled || readOnly"
        clearable
        @clear="handleClear"
      />
      <el-date-picker
        style="margin-left: 5px;"
        :size="size"
        v-model="input"
        :type="type"
        :value-format="format"
        :disabled="disabled || readOnly"
      />
    </div>
    <div v-else>
      <el-date-picker
        :size="size"
        v-model="localValue"
        :type="type"
        :value-format="format"
        :disabled="disabled || readOnly"
      />
    </div>
  </div>
</template>

<script>
import Mixins from "./mixins";
export default {
  mixins: [Mixins],
  data() {
    return {
      input: ""
    };
  },
  computed: {
    type: function() {
      return this.tableField.variableType === '30' ? "date" : "datetime";
    },
    format: function() {
      return this.type === "date" ? "yyyy-MM-dd" : "yyyy-MM-dd HH:mm:ss";
    }
  },
  watch: {
    input: {
      handler: function(val) {
        if (
          val &&
          this.tableField.fieldVariableValue.modifyEntryDate &&
          this.tableField.fieldVariableValue.modifyEntryDate === 1
        ) {
          this.localValue = val;
        }
      }
    }
  },
  methods: {
    handleClear () {
      this.localValue = ''
    }
  }
};
</script>

<style lang="scss" scoped>
.field-date {
  .el-date-picker-icon {
    /deep/ {
      .el-date-editor {
        width: 10px !important;
        cursor: pointer;
      }
      .el-input--prefix .el-input__inner {
        padding: 0.6rem 1rem;
      }
      
    }
  }
}
</style>